import * as THREE from 'three'

export const mapConfig = {
  material: {
    // 地图表面材质
    color: '#99beff',
    transparent: true,
    opacity: 1,
    emissive: '#fff',
    emissiveIntensity: 0.1,
    roughness: 0.3,
    metalness: 0.3
  },
  sideMaterial: {
    // 地图侧面材质
    color: '#83a1cc',
    transparent: true,
    opacity: 1,
    // emissive: '#589ee7',
    roughness: 0.8,
    metalness: 0.2
  },
  materialHighlight: {
    color: '#006aff'
  },
  labelStyle: {
    // 地图标签文字样式
    color: '#595959',
    fontWeight: 'normal',
    fontSize: '12px',
    // textShadow: 'none', // h-shadow v-shadow blur color
    position: 'relative',
    top: '0px',
    left: '0px'
    // WebkitTextStroke: '1px #00000080'
  },
  labelStyleHighlight: {
    // 地图标签文字高亮样式
    color: '#fff',
    fontSize: '16px',
    fontWeight: 'normal'
    // textShadow: '1px 1px 2px #000',
    // position: 'relative'
  },
  lineMaterial: {
    color: '#75b0db',
    transparent: true,
    opacity: 1
  },
  bottomLine: {
    radius: 0.02, // 地图底部线条半径
    color: '#1083F9', // 地图底部线条颜色
    transparent: true,
    opacity: 1
  },
  depth: 4, // 地图拉伸高度
  mapScale: 1,
  mapPosition: [0, 0, 0],
  cameraPosition: [0, 200, 200],
  rotation: {
    show: false,
    speed: 1,
    direction: 's',
    times: 'infinite'
  },
  intro: {
    show: false,
    duration: 4,
    ease: 'power2.inOut'
  },
  axesHelper: {
    show: true
    // length: 100
  },
  mapCentroid: [115.177642, 39.025137], // 地图中心点（地理中心经纬度）
  fullScreen: false // 是否用于大屏
  // screenWidth: 1920, // 可选，用于大屏的时候，大屏固定宽度
  // screenHeight: 1080, // 可选，用于大屏的时候，大屏固定高度
}

export const barConfig = {
  height: 2, // 柱状图最大高度
  radius: 0.02, // 柱状图半径
  material: {
    // 柱状图材质
    color: '#ff9e3a',
    roughness: 0.45,
    metalness: 0.4
  },
  materialHighlight: {
    // 柱状图高亮材质
    color: '#ff9e3a',
    emissive: '#ff9e3a',
    roughness: 0.45,
    metalness: 0.4
  },
  material2: {
    // 第二根柱子柱状图材质
    color: '#2e95ff',
    roughness: 0.45,
    metalness: 0.4
  },
  material2Highlight: {
    // 第二根柱子高亮材质
    color: '#2e95ff',
    emissive: '#2e95ff',
    roughness: 0.45,
    metalness: 0.4
  },
  coneMaterial: {
    color: '#999',
    // emissive: 0x000000,
    roughness: 0.45,
    metalness: 0.6
  },
  labelStyle: {
    show: true,
    padding: '10px',
    background: '#fff',
    borderRadius: '4px',
    opacity: 0.9,
    color: '#333',
    fontSize: '14px'
  },
  labelFormatter: (item) => {
    const innerHTML = [
      `<div style="font-weight: bold;margin-bottom: 8px;">${item.name}</div>`,
      ...(item.info || []).map(
        (i) => `
        <div style="display:flex">
          <span style="color:#999">${i.title}：</span>
          <span style="flex: 1">${i.content}</span>
        </div>`
      )
    ].join('')
    return innerHTML
  }
}

export const scatterConfig = {
  labelStyle: {
    maxWidth: '272px',
    padding: '12px',
    background: '#fff',
    color: '#333',
    fontSize: '14px',
    borderRadius: '4px',
    position: 'relative',
    top: '-100px',
    opacity: 0.9
  },
  labelFormatter: (item) => {
    const innerHTML = [
      `<div style="font-weight: bold;margin-bottom: 8px;">${item.name}</div>`,
      ...(item.info || []).map(
        (i) => `
        <div style="display:flex">
          <span style="color:#999">${i.title}：</span>
          <span style="flex: 1">${i.content}</span>
        </div>`
      )
    ].join('')
    return innerHTML
  }
}

export const blockConfig = {
  show: true,
  colors: ['#0F59FF', '#95CCFF'],
  labelStyle: {
    width: '160px',
    padding: '10px',
    background: '#144681',
    border: '1px solid #15B8FF',
    borderRadius: '4px',
    boxShadow: '0 2px 15px 0 rgba(0, 0, 0, 0.32)',
    color: '#fff',
    fontSize: '14px',
    position: 'absolute',
    top: '-20px',
    transform: 'translate(-40%, -100%)',
    visibility: 'hidden'
  },
  labelFormatter: (item) => {
    const innerHTML = [
      `<div style="font-weight: bold;margin-bottom: 8px;">${item.name}</div>`,
      ...(item.info || []).map(
        (i) => `
        <div style="display:flex">
          <span style="color:#B4D6FF">${i.title}：</span>
          <span style="flex: 1">${i.content}</span>
        </div>`
      )
    ].join('')
    return innerHTML
  },
  carousel: false
}

export const flyLineConfig = {
  show: false,
  material: {
    color: '#e692cc',
    transparent: true,
    opacity: 1
  },
  height: 3, // 曲线最高点高度
  radius: 0.2 // 曲线半径
}

export const bgConfig = {
  lineMaterial: {
    color: '#79a1d9',
    transparent: true,
    opacity: 0.5
  }
}
